<template>
	<contents :heightInclude="['tabBar']">
		<view>
			<view
				v-if="resData.length > 0"
				class="coupon_list"
				v-for="item in resData"
				:key="item.id"
			>
				<u-image
					width="194rpx"
					height="202rpx"
					src="http://img.druglots.cn/image/coupon_img.png"
				></u-image>
				<view class="price">{{ item.amountD }}</view>
				<view class="reduced">
					<view class="reduction">立减劵</view>
					<view class="expirationdate">
						失效期: {{ item.endTime }}
					</view>
				</view>
				<u-button class="use" type="primary">去使用</u-button>
			</view>
			<view class="nocoupon">
				<u-empty
					v-if="resData.length === 0"
					text="你暂时无可用的优惠券~"
					class="nocoupon-img"
					style="margin: 220rpx auto"
					color="rgba(34, 34, 34, 1)"
					font-size="32"
					icon-size="175"
					src="http://img.druglots.cn/image/nocoupon.png"
				></u-empty>
			</view>
		</view>
	</contents>
</template>

<script>
import { getcouponList } from '@/api/http/coupon.js'
export default {
	components: {},
	data() {
		return {
			pageNo: 1,
			resData: [],
			storeId: null
		}
	},
	// 取路由参数
	onLoad(opt) {
		this.storeId = opt.storeId
	},
	created() {
		this.getcouponList({
			pageNo: 1,
			pageSize: 20,
			storeId: this.storeId
		})
	},
	onPullDownRefresh() {
		this.getcouponList()
		uni.stopPullDownRefresh()
	},
	methods: {
		// 获取优惠券分页列表
		getcouponList(params) {
			getcouponList(params).then(res => {
				if (res.code === 200) {
					this.resData = res.data.records
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.coupon_list {
	background-color: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	display: flex;
	justify-content: space-around;
	overflow: hidden;
	position: relative;

	.reduced {
		line-height: 80rpx;
		margin-top: 27rpx;
		margin-left: 36rpx;
	}

	.reduction {
		font-size: 30rpx;
		font-family: 'PingFang SC';
		font-weight: bold;
		color: rgba(40, 40, 40, 1);
	}

	.expirationdate {
		font-size: 22rpx;
		font-family: 'PingFang SC';
		font-weight: 500;
		color: rgba(136, 136, 136, 1);
	}

	.use {
		width: 118rpx;
		height: 50rpx;
		margin-top: 77rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC';
		font-weight: bold;
	}
}

.coupon-img {
	float: left;
}

.price {
	font-size: 50rpx;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: 50rpx;
	top: 65rpx;
}

.price::before {
	content: '￥';
	color: #fff;
	font-size: 20rpx;
}

.nocoupon {
	.nocoupon-img {
		display: block;
		font-weight: 500;
		width: 350rpx;
	}
}
</style>
